//根据id获取元素对象
function my$(id) {
    // 返回元素的id对象
    return document.getElementById(id);
}
//动画函数---任意一个元素移动到指定的目标位置
function animate(element, target) {
    //先清理定时器
    clearInterval(element.timeId);
    //一会要清理定时器(只产生一个定时器)
    element.timeId = setInterval(function() {
        //获取div的当前的位置
        var current = element.offsetLeft; //数字类型,没有px
        //div每次移动多少像素---步数
        var step = 120;
        // 判断移动的方向
        step = current < target ? step : -step;
        //每次移动后的距离
        current += step;
        //判断当前移动后的位置是否到达目标位置
        if (Math.abs(target - current) > Math.abs(step)) {
            // 达到目标
            element.style.left = current + "px";
        } else {
            //清理定时器
            clearInterval(element.timeId);
            // 移动距离小于目标步数
            element.style.left = target + "px";
        }
    }, 100);
}
//获取所需元素
// 最外边盒子元素
var box = my$("box");
// 获取相框
var screen = box.children[0];
// 获取相框的宽度
var imgWidth = screen.offsetWidth;
// 获取移动元素ul
var ulObj = screen.children[0];
// 获取ul中的li元素
var list = ulObj.children;
// 获取小圆点的容器元素ol
var olObj = screen.children[1];
// 获取左右焦点
var arr = my$("arr");

var pic = 0; //全局变量
//创建小按钮----根据ul中的li个数
for (var i = 0; i < list.length; i++) {
    //创建li标签,加入到ol中
    var liObj = document.createElement("li");
    // 把li元素追加到ol
    olObj.appendChild(liObj);
    //在每个ol中的li标签上添加一个自定义属性,存储索引值
    liObj.setAttribute("index", i);
    //注册鼠标进入事件
    liObj.onmouseover = function() {
        //先干掉所有的ol中的li的背景颜色
        for (var j = 0; j < olObj.children.length; j++) {
            // 让li失去背景颜色
            olObj.children[j].removeAttribute("class");
        }
        //设置当前鼠标进来的li的背景颜色
        this.className = "current";
        //获取鼠标进入的li的当前索引值
        pic = this.getAttribute("index");
        //移动ul
        animate(ulObj, -pic * imgWidth);
    };
}
//设置当前按钮的样式
olObj.children[0].className = "current";
//复制ul中的第一个子元素并且添加到ul的最后
ulObj.appendChild(list[0].cloneNode(true));
// 让图片自动播放
var timeId = setInterval(clickHandle, 3000);
//鼠标进入box 显示左右焦点div
box.onmouseover = function() {
    // 显示左右焦点
    arr.style.display = "block";
    // 鼠标进入后清理定时器
    clearTimeout(timeId);
};
//鼠标离开box 隐藏左右焦点div
box.onmouseout = function() {
    // 隐藏左右焦点
    arr.style.display = "none";
    // 重新开始自动移动
    timeId = setInterval(clickHandle, 3000);
};
//左边按钮点击事件
my$("left").onclick = function() {
    // 判断变量pic为0的情况
    if (pic == 0) {
        // pic为0时直接变为5
        pic = 5;
        // 设置ul的宽度
        ulObj.style.left = -pic * imgWidth + "px";
    }
    // 变量减去1
    pic--;
    // 移动ul
    animate(ulObj, -pic * imgWidth);
    //设置小按钮的颜色---所有的小按钮干掉颜色
    for (var i = 0; i < olObj.children.length; i++) {
        // 所有的小按钮干掉颜色
        olObj.children[i].removeAttribute("class");
    }
    //当前的pic索引对应的按钮设置颜色
    olObj.children[pic].className = "current";
};
//右边按钮点击事件
my$("right").onclick = clickHandle;
//定义点击函数
function clickHandle() {

    // 判断最后一张图片的情况
    if (pic == list.length - 1) {
        // ul重新回到原点位置
        pic = 0;
        //ul重新回到原点位置
        ulObj.style.left = 0 + "px";
    }
    // 右焦点递加
    pic++;
    // 移动ul
    animate(ulObj, -pic * imgWidth);
    //同步ol中的li
    if (pic == list.length - 1) {
        // 当图片移动到最后一张时应该清除ol中第5个元素样式
        olObj.children[olObj.children.length - 1].className = "";
        // 设置第一个li小圆点当前样式
        olObj.children[0].className = "current";
    } else {
        // 遍历所有小圆点
        for (var i = 0; i < olObj.children.length; i++) {
            // 去掉其他小圆点样式
            olObj.children[i].removeAttribute("class");
        } // 设置第一个li小圆点当前样式
        olObj.children[pic].className = "current";
    }
}